<template>
  <div class="app-container">
    <div class="info-wrapper">
      <h3 style="margin:0; padding-bottom:24px;border-bottom:1px solid #ececec;">个人信息</h3>
      <div class="info">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="头像" prop="avatar">
            <el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/users/avatar'"
              :headers="{'Authorization': 'Bearer ' + $store.state.token}"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :multiple="true"
            >
              <img v-if="ruleForm.avatar" :src="$baseUrl + ruleForm.avatar" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="昵称" prop="name">
            <el-input type="text" v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="ruleForm.email" disabled />
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input type="text" v-model="ruleForm.address" />
          </el-form-item>
          <el-form-item label="电话" prop="tel">
            <el-input type="text" v-model="ruleForm.tel" />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="ruleForm.gender" placeholder="请选择性别">
              <el-option label="男" :value="0"></el-option>
              <el-option label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseInfo",
  data() {
    return {
      ruleForm: {},
      imageUrl: "",
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }]
      }
    };
  },

  mounted() {
    this.getUserInfo();
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const res = await this.$http.post('/users/updateUserInfo', {...this.ruleForm})
          if(res.code === 0) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    async getUserInfo() {
      const res = await this.$http.get("/users/userInfo");
      this.ruleForm = res.data;
    },
    handleAvatarSuccess(res) {
      this.$store.commit('SET_AVATAR', res.data)
      this.ruleForm.avatar = res.data
      // window.console.log(res, file);
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || "image/png" || "image/jpg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style lang="less">
@import "../assets/style/baseinfo.less";
</style>